package me.fung.wubi.app.view.editor.item

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.TooltipArea
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MiniSaveButton(tooltip: String, onClick: () -> Unit, image: ImageVector, enable: Boolean = true) {

    TooltipArea(
        tooltip = @Composable {
            Surface(
                modifier = Modifier.shadow(4.dp),
                color = Color(255, 255, 210),
                shape = RoundedCornerShape(1.dp),
            ) {
                Text(
                    text = tooltip,
                    modifier = Modifier.padding(10.dp)
                )
            }
        },
        modifier = Modifier,
    ) {
        CircleIconButton(
            onClick = {
                onClick()
            }, modifier = Modifier.size(20.dp, 30.dp).alpha(0.3f), icon = image, enable = enable
        )
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun CircleIconButton(
    onClick: () -> Unit, icon: ImageVector, enable: Boolean = true, modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
) {
    Surface(
        onClick = onClick,
        modifier = modifier.clip(RoundedCornerShape(50)),
        enabled = enable,
        interactionSource = interactionSource
    ) {
        Icon(icon, "")
    }
}